<template>
  <div :id="'print_'+data.commodityCode" style>
    <div id="dvMain" style="border:0px solid black;height:17.5cm;width:9.94cm;font-family:Calibri;background-color:white;position:relative;">
      <!-- <div style="position:absolute;top:1px;left:10px;">
        <img border="0" src="@/assets/images/htk.png">
      </div>-->
      <div style="position:absolute;top:1px;left:155px;">
        <!-- <img border="0" src="tiaoma.png"> -->
        <barcode v-if="data.afterCode" elementTag="canvas" margin-top="8" :displayValue="false" :value="data.afterCode">Show this if the rendering fails.</barcode>
      </div>
      <div style="position:absolute;top:5px;left:10px;">
        <!-- <img border="0" src="@/assets/images/kerry.png"> -->
        <!-- <h1 style="font-size:50px;margin-top:-20px">HTK</h1> -->
        <img border="0" src="@/assets/images/htk.png">
      </div>
      <div style="position:absolute;top:80px;left:10px;">
        <!-- <img border="0" src="@/assets/images/kerry.png"> -->
        <h1 style="font-size:50px;margin-top:-20px">HTK</h1>
      </div>
      <div style="position:absolute;top:30px;left:180px;font-size:48px;border:0px solid red;padding:0px;margin:0px;">{{data.esid}}</div>
      <div style="position:absolute;top:70px;left:160px;font-size:12px;">日期：{{data.shipDate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序号：1</div>
      <div class="zipai" style="position:absolute;top:92px;left:155px;">
        <!-- <img border="0" src="tiaoma.png" width="130px" height="40px"> -->
        <barcode v-if="data.afterCode" elementTag="canvas" margin-top="8" :displayValue="false" :value="data.afterCode" format="CODE128">Show this if the rendering fails.</barcode>
      </div>
      <div style="position:absolute;top:130px;left:185px;font-size:12px;">{{data.afterCode}}</div>
      <div style="position:absolute;top:155px;left:10px;font-size:10px;">出货单号：</div>
      <!-- <div
        style="position:absolute;top:108px;left:185px;font-size:26px;"
      >{{data.ssid}}-{{data.afterCode.substring(data.afterCode.length-4)}}</div>
      <div style="position:absolute;top:145px;left:185px;font-size:26px;">八里>{{data.esna}}</div> -->
      <div style="position:absolute;top:170px;left:10px;font-size:16px;">共&nbsp;&nbsp;1&nbsp;&nbsp;件之1</div>
      <div style="padding:0px;margin:0px;position:absolute;top:210px;left:0px;font-size:16px;width:100%;height:100px;border-top:1px solid black;border-bottom:1px solid black;">
        <div style="width:20px;margin:10px 0px 0px 10px;line-height:24px;font-size:16px;border:0px solid red;float:left;">收货人</div>
        <div style="width:210px;height:100%;border-right:1px solid black;float:left;padding:0px 0px 0px 10px;">
          <p style="padding:0px;margin:10px 0px 0px 0px;font-size:12px;border:0px solid red;">{{data.recipientsName}}</p>
          <p style="padding:0px;margin:6px 0px 0px 0px;font-size:12px;">{{data.recipientsPhone}}</p>
          <p style="padding:0px;margin:6px 0px 0px 0px;font-size:12px;">{{data.recipientsAddress}}</p>
        </div>
        <div style="width:114px;height:100%;border:0px solid black;float:left;padding:0px 0px 0px 10px;">
          <p style="padding:0px;margin:2px 0px 0px 0px;font-size:12px;text-align:center;">代收货款</p>
          <div style="padding:0px;margin:2px 0px 0px 0px;font-size:12px;">{{data.dsk}}</div>
        </div>
      </div>
      <div style="padding:0px;margin:0px;position:absolute;top:310px;left:0px;font-size:16px;width:100%;height:65px;border-top:0px solid red;border-bottom:1px solid black;">
        <div style="width:20px;margin:8px 0px 0px 10px;line-height:18px;font-size:16px;border:0px solid red;float:left;">备注栏</div>
        <div style="padding:6px 0px 0px 0px;margin:0px 0px 0px 40px;font-size:12px;">{{data.rmk}}</div>
      </div>
      <div style="padding:0px;margin:0px;position:absolute;top:375px;left:0px;font-size:16px;width:100%;height:80px;border-top:0px solid red;border-bottom:1px solid black;">
        <div style="width:20px;height:100%;margin:10px 0px 0px 10px;line-height:22px;font-size:16px;border:0px solid red;float:left;">寄件人</div>
        <div style="width:210px;height:100%;border-right:1px solid black;float:left;padding:0px 0px 0px 10px;">
          <p style="padding:0px;margin:10px 0px 0px 0px;font-size:12px;border:0px solid red;">Fujian lianyu electronic commerce co.LTD</p>
          <p style="padding:0px;margin:6px 0px 0px 0px;font-size:12px;">13705080124</p>
          <p style="padding:0px;margin:6px 0px 0px 0px;font-size:12px;">福州&nbsp;&nbsp;&nbsp;&nbsp;中国福州</p>
        </div>
        <div style="width:114px;height:100%;border:0px solid black;float:left;padding:0px 0px 0px 10px;">
          <p style="padding:0px;margin:2px 0px 0px 0px;font-size:12px;text-align:center;">货品内容</p>
          <div style="padding:0px;margin:2px 0px 0px 0px;font-size:12px;">{{data.commodityName}}</div>
        </div>
      </div>
      <div style="padding:0px;margin:0px;position:absolute;top:455px;left:0px;font-size:16px;width:100%;height:60px;border-top:0px solid red;border-bottom:1px solid black;">
        <div style="width:20px;height:100%;margin:2px 0px 0px 10px;line-height:26px;font-size:16px;border:0px solid red;float:left;">客服</div>
        <p style="padding:0px;margin:3px 0px 0px 40px;font-size:12px;">台北港国际物流股份有限公司</p>
        <p style="padding:0px;margin:3px 0px 0px 40px;font-size:12px;">02-26101888</p>
        <p style="padding:0px;margin:3px 0px 0px 40px;font-size:12px;">新北市八里区讯塘里广竹园22</p>
      </div>
      <div style="padding:0px;margin:0px;position:absolute;top:515px;left:0px;font-size:16px;width:100%;height:140px;border:0px solid red;">
        <p style="padding:0px;margin:3px 0px 0px 10px;font-size:12px;">
          <table style="border-collapse: collapse;border-bottom:1px solid #000;width:100%;font-size:10px">
            <tr style="font-weight:bold;">
              <td>物品名称</td>
              <td>单价</td>
              <td>数量</td>
              <td>总计</td>
            </tr>
            <tr style="border-top:1px solid #000" v-for="(item,index) in data.commodityList" :key="item.id">
              <td v-if="index<3">{{item.commodityName}}</td>
              <td v-if="index<3">{{item.commodityValue}}</td>
              <td v-if="index<3">{{item.amount}}</td>
              <td v-if="index<3">{{(item.amount * item.commodityValue).toFixed(2)}}</td>
            </tr>
          </table>
        </p>
        <p style="position:absolute;top:125px;left:8px;padding:0px;margin:0px;font-size:14px;border:0px solid red;width:170px;">网址：http://www.uce.cn</p>
        <!-- <div style="position:absolute;top:105px;left:235px;">
          <img border="0" src="@/assets/images/htk.png">
        </!-->
      </div>
    </div>
  </div>
</template>

<script>
import VueBarcode from "vue-barcode";
export default {
  components: {
    barcode: VueBarcode
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style>
.zipai .vue-barcode-element {
  width: 240px !important;
}
</style>
